/*
 * @Author: 肖思汗 
 * @Date: 2025-06-02 12:09:44 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-11-11 14:02:26
 */

import { Canvas, View } from '@tarojs/components';
import Taro, { useDidHide, useDidShow } from "@tarojs/taro";
import clsx from 'clsx';
import { autorun } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useRef, useState } from "react";
import utils from 'src/utils/utils';
import utilsStore from 'src/utils/utilsStore';
import styles from "./designer.module.less";
import designerRender from "./designerRender";

interface Iprops {
    children?: ReactNode
}

// 设计器
const Designer = observer((props: Iprops) => {
    const hasRotation = useRef<boolean>(false);

    useEffect(() => {
        const initializeCanvas = async () => {
            Taro.createSelectorQuery().select('#fabricCanvas')
                .fields({ node: true, size: true, rect: true })
                .exec(async res => {
                        if (res[0]) {
                        const { bottom, height, left, node, nodeCanvasType, right, top, width } = res[0];
                        // designerRender.setRect({ left, top, right, bottom, width, height });
                        await designerRender.init(node);
                    }
                });
        }
        initializeCanvas();
    }, []);

    return (
        <View className={styles.designer}>
            <Canvas
                className={styles.fabricCanvas}
                id='fabricCanvas'
                type='2d'
                width="1024px"
                height="1024px"
                style={{
                    width: '100%',
                    height: '100%',
                }}
                // disable-scroll={true}
                onTouchStart={(e) => {
                    // 如果是双指触摸，则计算初始距离和角度
                    if (e.touches.length === 1) {
                        designerRender.onTouchStart(e);
                        hasRotation.current = false;
                    }
                }}
                onTouchMove={(e) => {
                    // 如果是双指触摸，则计算双指缩放和旋转
                    if (e.touches.length === 1) {
                        if (hasRotation.current) {

                        } else {
                            designerRender.onMouseMove(e);
                        }
                    } else if (e.touches.length === 2) {
                        hasRotation.current = true;
                    }
                }}
                onTouchEnd={(e) => {
                    designerRender.onTouchEnd(e);
                    if (e.touches.length === 0) {
                        hasRotation.current = false;
                    }
                }}
            />
        </View>
    );
});

export default Designer;


